<template>
  <div class="fl-body">
    <div class="booklist">
      <ul>
        <!-- <li v-for="(item,k) in book_list">
            <router-link :to="`/cs?id=${item.id}&title=${item.title}`">
              <div class="book-1">
                <img :src="item.cover" alt="" />
              </div>
              <div class="text-1">
                <h4>{{item.title}}</h4>
                <p class="name-1">{{item.author}}|<span>{{item.category}}</span></p>
                <p class="p-1">简介:{{ item.content}}</p>
              </div>
            </router-link>
          </li> -->
      </ul>
    </div>
  </div>
</template>
<script>
import { reFunc, fllistFunc } from "@/request/index";
export default {
  data() {
    return {
      list_title: this.$route.query.list_title,
      list_url: decodeURI(this.$route.query.url),
      book_list: [],
      bsllist: [],
      pay: 0,
      bookStatus: 0,
      wordCount: 0,
      sort: 1,
      show: false,
    };
  },
  methods: {
    async url() {
      let url = this.list_url;
      await reFunc(url).then((lis) => {
        console.log(lis.categories);
        let lix = lis.categories;
        this.bsllist = lix.map((item) => {
          // console.log(item)
          return item.catArray;
        }).catch(err => {
          console.log("请求失败...");
        });
        console.log(url);
        let urls = url.split("=");
        let pays = this.pay;
        let bookStatuss = this.bookStatus;
        let wordCounts = this.wordCount;
        let sorts = this.sort;
        // .getAttribute('index')
        // console.log(urls[1]);
        fllistFunc(urls[1], pays, bookStatuss, wordCounts, sorts).then(
          (res) => {
            console.log();
            let t = document.querySelectorAll(".time .tag");
            t.forEach((item, x) => {
              if (item.getAttribute("index") == this.sort) {
                item.classList.add("select");
              }
            });
            let j = document.querySelectorAll(".jdu .tag");
            j.forEach((item, x) => {
              if (item.getAttribute("index") == this.bookStatus) {
                item.classList.add("select");
              }
            });
            let tx = document.querySelectorAll(".texl .tag");
            tx.forEach((item, x) => {
              if (item.getAttribute("index") == this.wordCount) {
                item.classList.add("select");
              }
            });
            let jg = document.querySelectorAll(".jiage .tag");
            jg.forEach((item, x) => {
              if (item.getAttribute("index") == this.pay) {
                item.classList.add("select");
              }
            });
            console.log(res.list);
            let data = res.list;
            this.book_list = data;
          }).catch(err => {
          console.log("请求失败...");
        });
      }).catch(err => {
          console.log("请求失败...");
        });
    },
    created() {
      // console.log(this.$route.query);
      this.url();
    },
  }
}
  </script>
<style lang="scss">
@import url(../../static/css/reset.css);
.fl-body {
  .booklist {
    width: 100%;
    // background: black;
    ul {
      li {
        margin-top: 5px;
        display: flex;
        box-sizing: content-box;
        border-bottom: #dcdcdc solid 1px;
        [class^="book"] {
          width: 93px;
          margin: 9px;
          float: left;
          img {
            width: 94px;
            height: 100%;
            border-radius: 5px;
          }
        }
        [class^="text"] {
          padding-top: 10px;
          color: #333;
          outline: none;
          padding-left: 10px;
          text-align: start;
          h4 {
            font-size: 15px;
            line-height: 19px;
            height: 38px;
            max-height: 38px;
          }
          [class^="name"] {
            color: #888;
            line-height: 15px;
            height: 15px;
            font-size: 12px;
            margin-bottom: 5px;
            -webkit-line-clamp: 2;
            overflow: hidden;
            span {
              margin-left: 2px;
            }
          }
          [class^="p"] {
            color: #888;
            line-height: 18px;
            height: 36px;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>